<template>
    <div v-loading="loading">
        <div style="text-align: center;">
            <el-input v-model="keyword" style="width: 200px; margin-right: 10px;"></el-input>
            <el-button @click="list">查询</el-button>
            <el-button style="background-color: red; color: white;" @click="add(0)">支出</el-button>
            <el-button style="background-color: green; color: white;" @click="add(1)">收入</el-button>
        </div>
        <div>
            <el-table :data="records" style="width: 100%">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column label="消费时间">
                    <template #default="scope">
                        {{ niceTime(scope.row.tradingTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column label="消费">
                    <template #default="scope">
                        {{ niceAmount(scope.row) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="edit(scope.row)">修改</el-button>
                        <el-button @click="deleteRecord(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog :title="currentEditTitle" v-model="isEditing">
                <el-form>
                    <el-form-item>
                        <el-row :gutter="10">
                            <el-col :lg="12">
                                <el-input placeholder="请输入消费金额" v-model.number="currentEdit.amount"
                                    class="input-with-select">
                                    <template #prepend>
                                        <el-select v-model="currentEdit.flowDirection">
                                            <el-option v-for="item, index in flowDirections" :label="item.label"
                                                :key="index" :value="item.value">

                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-col>
                            <el-col :lg="12">
                                <el-date-picker type="datetime" style="width: 100%;" v-model="currentEdit.tradingTime"
                                    placeholder="请选择消费时间"></el-date-picker>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入消费描述" v-model="currentEdit.description">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="save">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
    import axios from "axios";
    import apiConfig from "../api/base.ts";

    // import {
    //     ElMessage
    // } from "element-plus";

    console.log('REMOTE_API:' + apiConfig.baseUrl)

    const api = axios.create({
        baseURL: apiConfig.baseUrl,
    })

    const directionOut = 0
    const directionIn = 1

    import {
        defineComponent
    } from "vue";

    export default defineComponent({
        name: "RecordPage",
        data() {
            return {
                records: [],
                keyword: "",
                pageIndex: 1,
                total: 0,
                pageSize: 20,
                startTime: null,
                endTime: null,
                flowDirections: [{
                        value: directionIn,
                        label: '收入',
                    },
                    {
                        value: directionOut,
                        label: '支出'
                    }
                ],
                currentEditTitle: "消费记录信息",
                currentEdit: {
                    id: 0,
                    flowDirection: directionOut,
                    description: '',
                    amount: null,
                    tradingTime: null
                },
                isEditing: false,
                loading: false,
            }
        },
        methods: {
            list() {

                if (this.loading) {
                    return 0;
                }

                let query = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    start: this.startTime,
                    end: this.endTime,
                    keyword: this.keyword
                }

                this.loading = true
                // 接口请求
                api.post('/api/Billing/List', query)
                    .then((response) => {
                        if (response.data.isSuccess) {
                            this.records = response.data.result.collection
                        } else {
                            this.$message({
                                message: response.data.message,
                                type: "warning"
                            })
                        }
                        this.loading = false;
                    }).catch((err) => {
                        this.$message({
                            message: "加载时发生错误",
                            type: "error"
                        })
                        this.loading = false;
                    })
            },
            edit(record) {
                if (record.id <= 0) {
                    return 0;
                }
                // 显示编辑界面
                api.get('/api/Billing/GetDetail/' + record.id)
                    .then((response) => {
                        this.openEdit();
                        if (response.data.isSuccess) {
                            this.currentEdit = response.data.result;
                            this.currentEditTitle = "编辑消费记录";
                            this.openEdit()
                        } else {
                            this.$message({
                                message: response.data.message,
                                type: "warning"
                            });
                        }
                    }).catch((err) => {
                        this.$message({
                            message: "获取消费记录出错",
                            type: "error"
                        })
                    })
            },
            add(direction) {
                this.currentEditTitle = "新增消费记录";
                this.initRecord();
                this.currentEdit.flowDirection = direction;
                this.openEdit();
            },
            openEdit() {
                // 打开编辑界面
                this.isEditing = true
            },
            closeEdit() {
                // 关闭编辑界面
                this.isEditing = false;
                this.initRecord();
            },
            initRecord() {
                this.currentEdit = {
                    id: 0,
                    flowDirection: directionOut,
                    description: '',
                    amount: null,
                    tradingTime: null
                }
            },
            save() {

                if (this.loading) {
                    return 0;
                }


                let record = {
                    id: this.currentEdit.id,
                    flowDirection: this.currentEdit.flowDirection,
                    description: this.currentEdit.description,
                    amount: this.currentEdit.amount == null ? 0 : parseInt(this.currentEdit.amount),
                    tradingTime: this.currentEdit.tradingTime,
                }

                this.saveRecord(record)
            },
            cancel() {
                this.closeEdit();
            },
            saveRecord(record) {
                api.post('/api/Billing/Save', record)
                    .then((response) => {
                        if (response.data.isSuccess) {
                            this.$message({
                                message: "保存成功",
                                type: "success"
                            })
                            this.closeEdit()
                            this.list()
                        } else {
                            this.$message({
                                message: response.data.message,
                                type: "warning"
                            })
                        }
                    }).catch((err) => {
                        console.log("save error: " + err)
                        this.$message({
                            message: "保存时发生错误",
                            type: "error"
                        })
                    })
            },
            deleteRecord(id) {
                api.post('/api/Billing/Delete/' + id)
                    .then((response) => {
                        if (response.data.isSuccess) {
                            this.$message({
                                message: "删除成功",
                                type: "success"
                            })
                            this.list();
                        } else {
                            this.$message({
                                message: response.data.message,
                                type: "warning"
                            })
                        }
                    }).catch((err) => {
                        this.$message({
                            message: "删除出错",
                            type: "error"
                        })
                    })
            },
            niceTime(timeStr) {
                return timeStr.replace("T", " ").replace("Z", "").substring(0, 19)
            },
            niceAmount(record) {
                if (record.amount == 0) {
                    return "0"
                } else if (record.flowDirection == directionOut) {
                    return "- " + record.amount
                } else if (record.flowDirection == directionIn) {
                    return "+ " + record.amount
                } else {
                    return "NaN"
                }
            }
        },
        mounted() {
            this.list();
        }
    })
</script>

<style>
    .input-with-select .el-select .el-input {
        width: 80px;
    }

    .record-detail {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>